<template lang="pug">
  .commonCard
    markdown-editor(v-if="item.content" :viewer="true" :value="item.content")
    div(v-if="item.menuStyle === 2")
      el-row(:gutter="20")
        el-col(:span="12")
          .time-list(v-for="(step, stepIndex) in sliceList(item.contentList, true)" :key="step.id")
            .time-item
              .time(v-if="timePreSome(step, stepIndex, item.contentList, true)") {{step.beginAt}}~{{step.endAt}}
              .time(v-else)
              .title {{step.title}}
              .desc
                el-link(type="primary" @click="timeHandle(step)") 执行重点/材料
            el-divider(v-if="timeNextSome(step, stepIndex, item.contentList, true)")
            .divider(v-else)
        el-col(:span="12")
          .time-list(v-for="(step, stepIndex) in sliceList(item.contentList, false)" :key="step.id" )
            .time-item
              .time(v-if="timePreSome(step, stepIndex, item.contentList, false)") {{step.beginAt}}~{{step.endAt}}
              .time(v-else)
              .title {{step.title}}
              .desc
                el-link(type="primary" @click="timeHandle(step)") 执行重点/材料
            el-divider(v-if="timeNextSome(step, stepIndex, item.contentList, false)")
            .divider(v-else)
    div(v-else-if="item.menuStyle === 1")
      el-radio-group.tabTypes.mb20(v-if="item.contentList" v-model="curTabKey")
        el-radio-button(v-for="(step, stepIndex) in item.contentList" :key="stepIndex" :label="stepIndex") {{step.title}}
      div(v-if="item.contentList.length > 0")
        markdown-editor(v-if="item.contentList[curTabKey].content" :viewer="true" :value="item.contentList[curTabKey].content")
        el-row(:gutter="10")
          el-col(v-for="(tool, index) in item.contentList[curTabKey].toolList" :span="8" :key="tool.id")
            .course(@click="()=> toolHandle(tool)")
              audio-player(
                v-if="tool.type === 'radio'"
                ref="audioPlayer"
                :show-prev-button="false"
                :show-next-button="false"
                :audio-list="[tool.imgUrl]"
                :isLoop="false"
              )
              a-image(v-else :url="wrapToolCover(tool)" height="230px" :preview="false")
              h3 {{tool.title}}
    div(v-else :style="{ 'margin-left': margin, 'margin-right': margin}")
      el-collapse(v-model="activeNames" :accordion="level === 0 ? true : false")
        el-collapse-item(v-for="(contentItem, contentIndex) in item.contentList" :key="contentIndex" :name="contentIndex" :title="contentItem.title")
          CourseContent(:item="contentItem" :key="contentItem.id" :name="contentItem.id" :level="level+2")
    div
      el-row(:gutter="10")
        el-col(v-for="(tool, index) in item.toolList" :span="8" :key="tool.id")
          .course(@click="()=> toolHandle(tool)")
            audio-player(
              v-if="tool.type === 'radio'"
              ref="audioPlayer"
              :show-prev-button="false"
              :show-next-button="false"
              :audio-list="[tool.imgUrl]"
              :isLoop="false"
            )
            a-image(v-else :url="wrapToolCover(tool)" height="230px" :preview="false")
            h3 {{tool.title}}
    el-drawer.commonDrawer(
      :title="step.title"
      :visible="stepVisible"
      append-to-body
      center
      destroy-on-close
      direction="rtl"
      size="720px"
      @close="stepVisible = false"
    )
      .drawer-content
        markdown-editor(v-if="step.content" :viewer="true" :value="step.content")
        div
          el-row(:gutter="10")
            el-col(v-for="(tool, index) in step.toolList" :span="8" :key="tool.id")
              .course(@click="()=> toolHandle(tool)")
                audio-player(
                  v-if="tool.type === 'radio'"
                  ref="audioPlayer"
                  :show-prev-button="false"
                  :show-next-button="false"
                  :audio-list="[tool.imgUrl]"
                  :isLoop="false"
                )
                a-image(v-else :url="wrapToolCover(tool)" height="230px" :preview="false")
                h3 {{tool.title}}
</template>

<script>
import AImage from '@/components/Basic/Image'
import MarkdownEditor from '@/components/Basic/MarkdownEditor'
import AudioPlayer from '@liripeng/vue-audio-player'
export default {
  name: 'CourseContent',
  components: {
    MarkdownEditor,
    AImage,
    AudioPlayer
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      step: {},
      stepVisible: false,

      activeNames: [],
      curTabKey: 0
    }
  },
  computed: {
    margin: {
      get () {
        const f = this.level * 10
        return `${f}px`
      }
    }
  },
  created () {
    if (this.level === 0) {
      this.activeNames = [0]
    } else {
      const list = []
      for (const index in this.item.contentList) {
        list.push(parseInt(index))
      }
      this.activeNames = list
      console.log(this.activeNames)
    }
  },
  methods: {
    toolHandle (tool) {
      console.log(tool)
      if (tool.type !== 'audio') {
        window.open(tool.imgUrl)
      }
    },

    timePreSome (item, index, list, front) {
      if (index === 0) {
        return true
      }
      const itemList = this.sliceList(list, front)
      const preItem = itemList[index - 1]
      if (preItem.beginAt === item.beginAt) {
        return false
      }
      return true
    },

    timeNextSome (item, index, list, front) {
      const itemList = this.sliceList(list, front)
      if (itemList.length === index + 1) {
        return true
      }
      const nextItem = itemList[index + 1]
      if (nextItem.beginAt === item.beginAt) {
        return false
      }

      return true
    },

    timeHandle (item) {
      console.log(item)
      this.step = item
      this.stepVisible = true
    },
    sliceList (list, front) {
      const length = list.length
      const position = length / 2
      if (front) {
        return list.slice(0, position)
      } else {
        return list.slice(position, length)
      }
    },

    wrapToolCover (item) {
      if (item.type === 'image') {
        return item.imgUrl
      }
      return item.cover
    }
  }
}
</script>

<style lang="scss" scoped>
.time-list{
  .time-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC;
    color: #333333;
    .time{
      width: 80px;
    }

    .title{
      flex-grow: 1;
      margin: 12px 10px;
    }

    .desc{
      color: #7e83f7;
    }
  }
}
.course{
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  h3 {
    margin-top: 20px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
}

.el-divider--horizontal{
  margin: 0 0;
}

.divider{
  height: 1px;
}
</style>
